<script setup lang="ts">
import {close} from "fs-extra";

const emit = defineEmits([
  "update:visible",
  "close",
]);
const props = defineProps({
  title: {
    default: ''
  },
  width: {
    default: 800
  },
  visible: {
    default: false
  },
  footer: {
    default: null
  },
  style:{
    default: {}
  },
  bodyStyle: {
    default: {
      position: 'relative',
    }
  },
});
const close = () => {
  emit("update:visible", false);
  emit("close");
};
</script>

<template>
  <a-modal :width="width" :style="style" :footer="footer" :open="visible" :body-style="bodyStyle"
           @close="close" @cancel="close"
           :mask-closable="false"
  >
    <a-row type="flex" class="header">
      <a-col>
        <slot name="headerLeft">

        </slot>
      </a-col>
      <a-col class="title">
        {{ title }}
      </a-col>
      <a-col>
        <slot name="titleRight">

        </slot>
      </a-col>
      <a-col flex="1" style="text-align: right;padding-right: 30px;">
        <slot name="headerRight">

        </slot>
      </a-col>
    </a-row>
    <div style="height: 40px;"></div>
    <slot>

    </slot>

  </a-modal>
</template>

<style lang="less" scoped>
.header {
  width: 100%;
  position: absolute;
  height: 40px;
  //border-bottom: 1px solid rgb(400, 400, 400);;
  left: 0;
  top: 0;
  .title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    overflow-wrap: break-word;
    margin: 0;
  }
}
</style>
